<template name='video'>
  {{#with video}}
    <div class="ui videocontainer stackable two column grid computergrid">
      <!-- Player on page -->
      <div class="videocol eleven wide column" style="padding:0px!important">
        {{#if json.title}}
          {{> player}}
        {{/if}}
        <div class="ui segments" style="display:flow-root;padding: 0px;margin: 0px;">
          <!-- Title, Vote - Share - More  -->
          <div class="ui segment" style="padding-right: 0px !important;padding-bottom: 0px !important;">
            <div class="ui info" style="display: inline-grid;width: 100%;">
              {{#if json.title}}
                <div class="videotitlecontainer">
                  <h1 class="videotitle">{{json.title}}</h1>
                </div>
              {{/if}}
              <div style="display:inline-block;">
                <div id='videosnaptags' class='videosnaptags pos-rel' style="bottom: 5px;float:left;max-width: 48%;">
                  {{#each tags}}
                    {{#unless equals t 'dtube'}}
                      <a href="/t/{{t}}" class="ui small label">
                        {{convertTag t}}
                      </a>
                    {{/unless}}
                  {{/each}}
                  {{#if activeUsername}}
                  <a class="ui small label newtag scrolling dropdown dropdownTags">
                    <i class="thumbs up icon"></i> {{translate 'VIDEO_VOTE_TAG'}}
                    <div class="menu">
                      {{#each allTags}}
                        {{#unless equals t 'dtube'}}
                          <div class="item voteATag" data-value="{{convertTag t}}">{{convertTag t}}</div>
                        {{/unless}}
                      {{/each}}
                      <div class="divider"></div>
                      <div class="item voteCustomTag"><i class="thumbs up icon"></i> Upvote new tag</div>
                      <div class="item downvoteCustomTag"><i class="thumbs down icon"></i> Downvote a tag</div>
                    </div>
                  </a>
                  {{/if}}
                </div>
                <div class="ui videovotecontainer right floated" style="bottom: 0px;height: 38px;">
                  {{> videosettingsdropdown video}}
                  {{> videosharedropdown video}}
                  <div style="float: right;" class="button icon bottom aligned ">
                    <button class="ui icon button upvote votebutton">
                      {{#if hasUpvoted video}}
                        <i class="thumbs up icon red"></i>
                      {{else}}
                        <i class="thumbs up icon"></i>
                      {{/if}}
                      <span>{{uniques votes votesSteem votesHive 'up'}}</span>
                    </button>
                    <button class="ui icon button downvote votebutton">
                      {{#if hasDownvoted video}}
                        <i class="thumbs down icon red"></i>
                      {{else}}
                        <i class="thumbs down icon"></i>
                      {{/if}}
                      <span>{{uniques votes votesSteem votesHive 'down'}}</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Author Info (image and name) - Suscribe - Edit - Payout   -->
          <div class="ui segment" style="padding:0px!important;">
            <div class="details wid-ful">
              <div class="videoleftdetails wid-ful" style="padding: 10px;">
                <div class="videorightdetails">
                  <div class='topvotersdiv'>
                    {{> topupvoters}}
                  </div>
                  <div class='videopayout'>
                    {{#if scot}}
                      {{displayScot distScot scot}}
                    {{else}}
                      {{displayRewards dist distSteem distScot distHive}}
                      {{>badgehelp 'token-economics'}}
                    {{/if}}
                  </div>
                  <svg class="sparkline" width="200" height="60" stroke-width="2" style="display:none"></svg>                  
                </div>
                {{#if body}}
                <div class="ui left tiny circular avatar floated image"
                  style="margin-top: 4px; background-size: cover;min-width:64px; width:64px; height: 64px; background-image:url({{userPicSteem video.author ''}})">
                </div>
                {{else}}
                <div class="ui left tiny circular avatar floated image"
                  style="margin-top: 4px; background-size: cover;min-width:64px; width:64px; height: 64px; background-image:url({{userPic video.author ''}})">
                </div>
                {{/if}}
                <div class="channelLink" style="margin-top:10px;">
                  <a href="/c/{{video.author}}">
                    {{video.author}}
                  </a>
                </div>
                {{#unless equals activeUser user.name}}
                  {{#if activeUsername}}
                    {{#if isSubscribedTo video.author}}
                      {{>buttonunsubscribe}}
                    {{else}}
                      {{>buttonsubscribe}}
                    {{/if}}
                  {{else}}
                    <a href="/login/dtube">
                      {{>buttonsubscribe}}
                    </a>
                  {{/if}}
                {{else}}
                  {{>buttonedit}}
                {{/unless}}
                <span class='donateButton' style='margin-left: 10px'>
                  {{>buttontransfersmall}}
                </span>
              </div>
            </div>
          </div>
          <div id='editvideosegment' class="ui segment" style="display: none">
            {{#if isIPFSOrBTFSUpload}}
              {{> uploadfileform}}
            {{else}}
              {{> uploadform}}
            {{/if}}
            {{> uploadformsubmit}}
            {{#if json.files}}
              {{> uploadformfulledit}}
            {{/if}}
          </div>

          <!-- Syntaxed video description - Show More -->
          <div id="descriptionsegment" class="ui segment closed descriptionsegment wid-ful" style="display:grid;overflow: hidden;">
            <div class='allNetworks'>
              {{#each allNetworks}}
                {{#if equals this 'dtc'}}
                  <img width="32" src="./DTube_files/images/logos/dtube.png">
                {{/if}}
                {{#if equals this 'steem'}}
                  <img width="32" src="./DTube_files/images/logos/steem.png">
                {{/if}}
                {{#if equals this 'hive'}}
                  <img width="32" src="./DTube_files/images/logos/hive.png">                  
                {{/if}}
              {{/each}}
            </div>
            <div id="truncateddesc" class="truncate" style="overflow: hidden;">
              <strong title='{{timeAgo ts}}'>
                {{ translate 'VIDEO_ADDED_ON'}} {{timeDisplay ts}}
              </strong>
              <br/> {{{syntaxed json.desc json.description}}}
            </div>
          </div>
          {{#if hasMoreThan4Lines}}
            <div class="ui segment description" style="text-align: center; padding:0px;margin:0px;">
              <div id="showmore" style="text-align: center;">
                <button class="ui button videoshowmore">
                  {{ translate 'VIDEO_DESCRIPTION_SHOW_MORE'}}
                </button>
                <i class="ui icon angle down"></i>
              </div>
              <div id="showless" class="hidden" style="text-align: center;">
                <button class="ui button videoshowmore">
                  {{ translate 'VIDEO_DESCRIPTION_SHOW_LESS'}}
                </button>
                <i class="ui icon angle up"></i>
              </div>
            </div>
          {{/if}}

          <!-- Related Videos Mobile -->
          {{#if isOnMobile}}
            {{#if userVideosAndResteems}}
              <div class="ui grid mobile only content videorecommendedmobile">
                <h3>{{ translate 'VIDEO_RELATED_VIDEOS'}}</h3>
                {{> verticalvideoband userVideosAndResteems}}
              </div>
            {{/if}}
          {{/if}}
          <!-- Comments - Reply -->
          <div class="ui secondary segment" style="background: #f5f5f5;">
            <h3 class="ui header">
              {{#if isSingleComment}}
                {{mergedCommentsLength comments commentsSteem}} {{ translate 'COMMENT_REPLY'}}
              {{else}}
                {{mergedCommentsLength comments commentsSteem}} {{ translate 'COMMENT_REPLIES'}}
              {{/if}}
            </h3>
            {{#if isLoggedOn}} {{#if isNoComment}}
            <div style=" text-align: center;padding:10px;">
              <h4>{{ translate 'VIDEO_BE_THE_FIRST_TO_COMMENT'}}</h4>
            </div>
            {{/if}}
            {{#if isReplyingRoot}}
            <div class="wid-ful dsp-flx">
              <!-- <div style="text-align:left;float:left;">
                <div class="ui avatar mini image"
                  style="background-size:cover; margin-top:10px; min-width:48px; width:48px; height: 48px; background-image:url({{userPic activeUser 'small'}})">
                </div>
                <div class="ui author" style="margin-top:5px;margin-right:10px;font-weight: 600;">{{activeUser}}</div>
              </div> CANT HAVE THAT WITH 2 LOGGED IN USERS ? -->
              <form class="ui reply form wid-ful">
                <div class="field pos-rel wid-ful" style="display: inline-block;vertical-align: top;">
                  <textarea id="replytext" rows="3"></textarea>
                </div>
                <div class="ui blue right labeled icon submit button dtube pos-rel" style="float:right;vertical-align: top;">
                    <i class="ui blue icon remove repl dsp-non" style="background:white;opacity:1;"></i>
                    <i class="ui blue icon load repl dsp-non" style="background:white;opacity:1;"><div class="ui active loader"></div></i>
                    <i class="ui blue right icon repl talk iconloader on" style="background:white;"></i>
                    <div style="display:inline-block;padding: 0.8em 1em;">{{ translate 'VIDEO_ADD_COMMENT'}}</div>
                </div>
              </form>
            </div>
            {{/if}}
            {{else}}
            <div style=" text-align: center;padding:10px;">
              <a href="/login">
                <h5>{{ translate 'VIDEO_YOU_NEED_TO_LOGIN_TO_COMMENT'}}</h5>
              </a>
            </div>
            {{/if}}
            {{> comments}}
          </div>
        </div>
      </div>
      <!-- Related videos  -->
      {{#unless isOnMobile}}
        {{#if isTabletOrLower}}
        <div class="four wide column tablet only">
          <div class="ui grid videorecommendedtablet" style='margin-top:0px'>
            {{> verticalvideoband userVideosAndResteems}}
          </div>
        </div>
        {{else}}
        <div class="pdg-5 relatedcol four wide column computer only">
          <div class="ui grid videorecommendedcomputer" style="margin-right: -5rem;">
            <h3>{{ translate 'VIDEO_RELATED_VIDEOS'}}</h3>
            {{#if userVideosAndResteems}}
              {{> verticalvideoband userVideosAndResteems}}
            {{/if}}
          </div>
        </div>
        {{/if}}
      {{/unless}}
    </div>
  {{/with}}
</template>
